<template>
    <div class="app">
        <div class="header">
            <div class="header_text" :class="status=='all'?'activate':''"  @click="tab('all')">
                <text>全部</text>
            </div>
            <div class="header_text" :class="status==0?'activate':''"  @click="tab(0)">
                <text>待付款</text>
            </div>
            <div class="header_text" :class="status==1?'activate':''"  @click="tab(1)">
                <text>待发货</text>
            </div>
            <div class="header_text" :class="status==2?'activate':''"  @click="tab(2)">
                <text>待收货</text>
            </div>
            <div class="header_text" :class="status==3?'activate':''"  @click="tab(3)">
                <text>已完成</text>
            </div>
            <div class="header_text" :class="status==-1?'activate':''"  @click="tab(-1)">
                <text>已取消</text>
            </div>
        </div>

        <div class="main" v-for="item in list" :key="index" >
            <div class="main_list"  v-for="(subitem,subindex) in item.goods_list" :key="subindex">
                <div class="left">
                    <img :src="resurl+subitem.pic+'?x-oss-process=image/resize,m_fill,w_750,h_300'">
                </div>
                <div class="right">
                    <div class="name">{{subitem.name}}</div>
                    <div class="num">*{{subitem.number}}</div>
                </div>
            </div>
            <div class="bottom">
                <div class="text">订单编号：<text>{{item.orderno}}</text></div>
                <div class="text">下单时间：<text>{{item.datetime}}</text></div>
                <div class="text">订单总额：￥<text>{{item.totalprice}}</text></div>
                <div class="text">订单状态：<text>{{item.status_str}}</text></div>
                <div class="apply">
                    <a class="refund" v-if="item.status!=0">申请退款</a>
                    <text class="order_status" v-if="item.status==0" @click="cancel(item.orderno)">取消订单</text>
                    <text class="pay"  v-if="item.status==0" @click="pay(item.orderno)">支付</text>
                    <text class="order_status" v-if="item.status==2"  @click="confirm(item.orderno)">确认收货</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    var that = null;
    var loading = false;
    var loaded = false;
    var page = 1;
    export default {
        data() {
            return this.datainit({
                status:'all',
                list:[],
                orderno:null
            })
        },
        onShow() {
            that = this;
            that.check()
        },
        mounted() {
            that.status = that.get("status")
        },
        methods: {
            init() {
                that.showlist()
            },
            tab:function(status){
                that.status = status;
                that.showlist()
            },
            showlist:function(){
                 loading = false;
                 loaded = false;
                 page = 1;
                 that.orderlist()
            },
            orderlist:function(){
                if (loading || loaded) {
                    return;
                }
                loading = true;
                that.list = []
                that.$post("shop/user_order/lists",{status:that.status,page:page,status:that.status},function(list){
                    var lastlist = that.list
                    for (var i in list) {
                        lastlist.push(list[i])
                    }
                    that.list = lastlist
                    page++
                    loading = false;
                    if (list.length < 10) {
                        loaded = true
                    }
                })
            },
            confirm:function(_orderno){
                that.orderno = _orderno
                that.$post("shop/user_order/confirm", { orderno: that.orderno }, function (data) {
                    console.log('121231')
                    that.showlist()
                })
            },
            cancel:function(_orderno){
                that.orderno = _orderno
                that.$post("shop/user_order/cancel", { orderno: that.orderno }, function (data) {
                    console.log('121231')
                    that.showlist()
                })
            },
            pay:function(_orderno){
                that.orderno = _orderno;
                that.$post("shop/order/pay",{orderno:that.orderno},function(data){
                    wx.requestPayment({
                        'timeStamp': data.timestamp + '',
                        'nonceStr': data.nonceStr,
                        'package': data.package,
                        'signType': 'MD5',
                        'paySign': data.paySign,
                        'success': function (ref) {
                            wx.redirectTo({
                                url: "/pages/shop/order_list/main",
                            })
                        },
                        'fail': function (ref) {
                            that.toasts("支付失败")
                        }
                    })
                })
            },
            toasts:function(message){
                wx.showToast({
                    title: message,
                    icon: 'none',
                    duration: 2000
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .header{
        width: 100%;
        height: 50px;
        background: #fff;
        display: flex;
        .header_text{
            flex: 1;
            text-align: center;
            line-height: 50px;
        }
        .activate{
            color:#ff6600;
        }
    }
    .main{
        width: 95%;
        background: #fff;
        margin:10px auto;
        .main_list{
            width: 100%;
            height: 130px;
            display: flex;
            border-bottom: 1px solid #ccc;

            .left{
                width: 120px;
                height: 120px;
                margin-top: 5px;
                margin-left: 5px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .right{
                flex: 1;
                position: relative;
                .name{
                    position: absolute;
                    top:20px;
                    left:10px;
                }
                .num{
                    position: absolute;
                    top:30px;
                    right: 10px;
                }
            }
        }
        .bottom{
            width: 100%;
            height: 150px;
            .text{
                margin-top: 10px;
                margin-left: 10px;
                text{
                    margin-left: 5px;
                }
            }
            .apply{
                color: #ff6600;
                margin-top: 10px;
                margin-left: 10px;
                position: relative;
                .refund{
                    position: absolute;
                    left:10px;
                }
                .order_status{
                    position: absolute;
                    right: 50px;
                }
                .pay{
                    position: absolute;
                    right: 10px;
                }
            }
        }
    }
</style>

